<template>
    <div class="logining">
        <div class="logo"><img src="../../common/image/LOGO.png" alt=""></div>
        <div class="form_box">
                <input class="input_txt" v-on:input="email" name="email" type="text" placeholder="请输入您的邮箱">
                <div class="num">
                    <input type="text" placeholder="请输入验证码" v-on:input="code" name="code">
                    <button type="button" id="send" :class="{disabled: !this.canClick}" @click="countDown">{{content}}</button>
                </div>
                <input class="input_txt" type="password" v-on:input="passwords" name="passwords" placeholder="密码必须6-30个位">
                <button class="input_button" @click="registe">注册</button>
        </div>
        <div class="registerby"><router-link to="/login">已有账号，请前往登录</router-link></div>
    </div>
</template>

<script>
    import { Toast } from 'mint-ui';
    export default {
        data (){
            return{
                emailnum:'',
                paswnum:'',
                codenum:'',
                canClick: true,
                totalTime: 60,
                content:'发送验证码'
            }
        },methods:{
            email(e){
                let email = document.querySelector('input[name=email]');
                this.emailnum = e.target.value;
                if(this.telnum != ''){
                    email.style.border = 'none';
                    email.className = 'input_txt';
                    if(!(/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/.test(this.emailnum))){
                        email.style.border = '1PX solid red';
                        email.className = 'input_txt active_no';
                        Toast({
                            message: '请输入正确的邮箱！',
                            position: 'top',
                            duration: 3000
                        });
                    }else{
                        email.style.border = 'none';
                        email.className = 'input_txt';
                    }
                }
            },
            code(e){
                let codes = document.querySelector('input[name=code]');
                this.codenum = e.target.value;
                if(this.codenum != ''){
                    codes.style.border = 'none';
                    codes.className = '';
                    if(!(/^[0-9a-zA-Z]{4}$/.test(this.codenum))){
                        codes.style.border = '1PX solid red';
                        codes.className = 'active_no';
                        Toast({
                            message: '请输入正确的验证码！',
                            position: 'top',
                            duration: 3000
                        });
                    }else{
                        codes.style.border = 'none';
                        codes.className = '';
                    }
                }
            },
            passwords(e){
                let passwords = document.querySelector('input[name=passwords]');
                this.paswnum = e.target.value;
                if(this.paswnum != ''){
                    passwords.style.border = 'none';
                    passwords.className = 'input_txt';
                    if(!(/^[0-9a-zA-Z]{6,10}$/.test(this.paswnum))){
                        passwords.style.border = '1PX solid red';
                        passwords.className = 'input_txt active_no';
                        Toast({
                            message: '请输入正确的密码！',
                            position: 'top',
                            duration: 3000
                        });
                    }else{
                        passwords.style.border = 'none';
                        passwords.className = 'input_txt';
                    }
                }
            },
            registe(){
                let email = document.querySelector('input[name=email]');
                let code = document.querySelector('input[name=code]');
                let passwords = document.querySelector('input[name=passwords]');
                if(this.emailnum != '' && this.paswnum != '' && this.codenum != ''){
                    Toast('注册成功！');
                    this.$router.push('/login');
                }else if(this.emailnum == ''){
                    email.style.border = '1PX solid red';
                    email.className = 'input_txt active_no';
                    Toast({
                        message: '请输入正确的邮箱！',
                        position: 'top',
                        duration: 5000
                    });
                }else if(this.codenum == ''){
                    code.style.border = '1PX solid red';
                    code.className = 'active_no';
                    Toast({
                        message: '请输入正确验证码！',
                        position: 'top',
                        duration: 5000
                    });
                }else if(this.paswnum == ''){
                    passwords.style.border = '1PX solid red';
                    passwords.className = 'input_txt active_no';
                    Toast({
                        message: '请输入正确的密码！',
                        position: 'top',
                        duration: 5000
                    });
                }else{
                    email.style.border = 'none';
                    email.className = 'input_txt';
                    code.style.border = 'none';
                    code.className = '';
                    passwords.style.border = 'none';
                    passwords.className = 'input_txt';
                    Toast({
                        message: '请输入完整登录信息！',
                        position: 'top',
                        duration: 5000
                    });
                }

            },
            countDown(){
                let email = document.querySelector('input[name=email]');
                let sendBtn = document.querySelector('#send');
                if(this.emailnum == ''){
                    email.style.border = '1PX solid red';
                    email.className = 'input_txt active_no';
                    Toast({
                        message: '请先输入您的邮箱！',
                        position: 'top',
                        duration: 5000
                    });
                }else{
                    email.style.border = 'none';
                    email.className = 'input_txt';
                    sendBtn.style.backgroundColor = 'gray';
                    if (!this.canClick) return;
                    this.canClick = false;
                    this.content = this.totalTime + 's后重新发送';
                    let clock = window.setInterval(() => {
                        this.totalTime--;
                        this.content = this.totalTime + 's后重新发送';
                        if (this.totalTime < 0) {
                            window.clearInterval(clock);
                            this.content = '发送验证码';
                            this.totalTime = 60;
                            this.canClick = true;
                            sendBtn.style.backgroundColor = '#356aff';
                        }
                    }, 1000)
                }
            }
        }

    }
</script>

<style scoped lang="scss">
    .logining{
        width: 100%;
        padding-top: 20%;
        .logo{
            width: 100%;
            text-align: center;
            margin-bottom: 20PX;
            img{width: 20%;}
        }
        .form_box{
            width: 100%;
            text-align: center;
                .input_txt{
                    width: 73%;
                    background: #f3f4f6;
                    padding: 14PX;
                    border-radius: 3PX;
                    margin: 10PX auto;
                    letter-spacing: 1PX;
                    box-shadow: 1PX 2PX 10PX gainsboro;
                }
                .num{
                    width: 81%;
                    height: 42PX;
                    margin: 10PX auto;
                    box-shadow: 1PX 2PX 10PX gainsboro;
                    border-radius: 3PX;
                    input{
                        float: left;
                        background: #f3f4f6;
                        height: 42PX;
                        padding: 0 14PX;
                        width: 66%;
                        border-radius: 3PX 0 0 3PX;
                        box-sizing: border-box;
                    }
                    button{
                        float: left;
                        width: 34%;
                        color: #fff;
                        background: #356aff;
                        border: none;
                        height: 42PX;
                        margin-bottom: 10PX;
                        border-radius: 0 3PX 3PX 0;
                    }
                }
                .input_button{
                    width: 80%;
                    background: #356aff;
                    text-align: center;
                    padding: 14PX;
                    border-radius: 3PX;
                    margin: 8PX auto;
                    color: #fff;
                    border: none;
                    letter-spacing: 5PX;
                    box-shadow: 1PX 2PX 10PX gainsboro;
                    font-size: 14PX;
                }
        }
        .pasw{
            width: 100%;
            text-align: center;
        }
        .registerby{
            width: 100%;
            text-align: center;
            margin-top: 30%;
        }
    }
</style>
<style>
    .mint-toast.is-placetop{width: 100%!important;}
    .active_no::-webkit-input-placeholder{color:red;}
</style>